<template>
  <div class='glass'>
    <!-- <div v-title>我的</div> -->
    <div class='title cf'>
      <i class='touxiang' @click='setup'><img src="../../../static/assets/touxiang.png" v-if='!touxiangsrcflag'><img :src="touxiangsrc" v-else></i>
      <span v-if="loginflag">登录/注册</span>
      <span v-else>{{accountStar}}</span>
      <i class="info" @click='toMsg'></i>
      <i class="setting" @click='setup'></i>
    </div>
    <div class="count">
      <div class='moneyContent'>账户余额(元)<i @click="show=!show" :class="show ? 'sun': 'unsun'"></i></div>
      <div class="moneyContent2" v-if="show">{{useableMoney}}<span @click='tocharge'>充值</span><span class="tixian" @click='towithdraw'>提现</span></div>
      <div class="moneyContent2" v-else>******<span @click='tocharge'>充值</span><span class="tixian" @click='towithdraw'>提现</span></div>
    </div>
    <div class='typeTips'>
      <div class="cash">
        <div class='capital'>
          <div>每日预期收益(元)</div>
          <div v-if="show">{{sumDailyInterest}}</div>
          <div v-else>******</div>
        </div>
        <div class='capital'>
          <div>累计收益(元)</div>
          <div v-if="show">{{myinterest}}</div>
          <div v-else>******</div>
        </div>
        <div class='capital' @click='toMyCapital'>
          <div>我的资产(元)</div>
          <div v-if="show">{{totalMoney}}</div>
          <div v-else>******</div>
        </div>
      </div>
    </div>
    <div class="divwapper">
      <ul>
        <li @click='toInvest' >
          <h3>我的投资</h3>
          <p>小额分散稳定收益</p>
        </li>
        <li @click='tohongbao' class="hongbao border-right">
          <h3>红包优惠</h3>
          <p>理财红包、加息券</p>
          <i></i>
        </li>
        <li @click='setup'>
          <h3>个人信息</h3>
          <p>实名,绑卡,设置密码</p>
        </li>
        <li @click='tofriend' class="border-right">
          <h3>邀请好友</h3>
          <p>还有注册，有福同享</p>
        </li>
        <li @click='todate' class=" border-bottom">
          <h3>回款日期</h3>
          <p>清晰了解资金情况</p>
        </li>
        <li @click='toTransactionRecord' class="border-right border-bottom">
          <h3>交易记录</h3>
          <p>笔笔交易清晰透明</p>
        </li>
      </ul>
    </div>
    <div class='mask' v-if='loginflag'></div>
    <div class='mask' v-if='validata' style='z-index:11;'></div>
    <div class='validataPop' v-if='validata'>
      <div class='poptitle'>提示</div>
      <div class='popcontent'>{{validataContent}}</div>
      <div class='popBTN'>
        <span @click='closeValidataPop'>取消</span>
        <span @click='pathtoValidata'>{{validataBTNcontent}}</span>
      </div>
    </div>
    <div class='loginmask' v-if='loginflag'>
      <div @click='toregistry'><span class='registry'>注册</span></div>
      <div @click='toregistry'><span class='login'>登录</span></div>
    </div>
    <!--银行存管弹窗-->
    <!--<div class="bankManagementPopUp" v-show="popupFlag">
      <div class="popUpLayer" @click="topopUp"></div>
      <div class="close" @click="closepopUp"></div>
    </div>-->
  </div>
</template>
<script>
  import ajax from '@/utils/ajax'
  export default {
    data: function() {
      return {
        mySwiper: '',
        loginflag: true,
        totalMoney: 0,
        useableMoney: 0,
        myinterest: 0,
        sumDailyInterest: 0,
        //以下验证使用
        validata: false,
        validataContent: '',
        validataBTNcontent: '',
        errorIndexArray: '',
        touxiangsrcflag: false,
        touxiangsrc: '',
        accountStar:'',
        account:'',
        show:true,
        //存管弹窗
        popupFlag:false,
      }
    },
    methods: {
      topopUp(){
        this.$router.push('/bankManagement')
      },
      closepopUp(){
        this.popupFlag = false
      },
      closeValidataPop: function() {
        this.validata = false
      },
      pathtoValidata: function() {
        if (this.errorIndexArray == 0) {
          this.$router.push('/realname')
        } else if (this.errorIndexArray == 1) {
          this.$router.push('/dealpassword')
        } else if (this.errorIndexArray == 2) {
          this.$router.push({
            path: '/mybank',
            query: {
              type: 1
            }
          })
        }
      },
      setup: function() {
        this.$router.push('/pages/my/setup')
      },
      toregistry: function() {
        this.$router.push('/pages/my/login')
      },
      show:function(){
        this.useableMoney.replace('******')
      },
      toMyCapital: function() {
        this.$router.push('/myCapital')
      },
      cash: function() {
        this.$router.push('/cash')
      },
      toInvest: function() {
        this.$router.push('/invest')
      },
      toMsg: function() {
        this.$router.push('/msg')
      },
      toTransactionRecord: function() {
        this.$router.push('/transactionRecord')
      },
      toprofit: function() {
        this.$router.push('/profit')
      },
      tohongbao: function() {
        this.$router.push('/index/fuli/hongbao1?type1=2&type=3')
      },
      todate: function() {
        this.$router.push('/date')
      },
      tofriend:function(){
        this.$router.push({
          path: '/friend1',
          query: {
            m: sessionStorage.getItem('account')
          }
        })
      },
      tocharge: function() {
        let indexArray = []
        indexArray.push(sessionStorage.getItem('realname'))
        indexArray.push(sessionStorage.getItem('paypassword'))
        indexArray.push(sessionStorage.getItem('bankbind'))
        this.errorIndexArray = indexArray.indexOf('0')
        if (this.errorIndexArray == 0) {
          this.validata = true
          this.validataContent = '您尚未通过实名认证'
          this.validataBTNcontent = '去认证'
        } else if (this.errorIndexArray == 1) {
          this.validata = true
          this.validataContent = '您尚未设置交易密码'
          this.validataBTNcontent = '去设置'
        } else {
          this.$router.push('/mybank')
        }
      },
      towithdraw: function() {
        let indexArray = []
        indexArray.push(sessionStorage.getItem('realname'))
        indexArray.push(sessionStorage.getItem('paypassword'))
        indexArray.push(sessionStorage.getItem('bankbind'))
        this.errorIndexArray = indexArray.indexOf('0')
        if (this.errorIndexArray == 0) {
          this.validata = true
          this.validataContent = '您尚未通过实名认证'
          this.validataBTNcontent = '去认证'
        } else if (this.errorIndexArray == 1) {
          this.validata = true
          this.validataContent = '您尚未设置交易密码'
          this.validataBTNcontent = '去设置'
        } else {
          this.$router.push('/mybank')
        }
      }
    },
    onShow(){
      wx.removeStorageSync('borrowIndex')
      let $this = this
      let isLogin = wx.getStorageSync('isLogin')
      if ( isLogin || this.$route.query.login == 1) {
        this.loginflag = false
        this.accountStar = wx.getStorageSync('accountStar')
        this.account = wx.getStorageSync('account').substring(0,1)+"**"
        var header;
        header = {
          'content-type': 'application/x-www-form-urlencoded',
          'cookie':wx.getStorageSync("sessionid")//读取cookie
        };
//        wx.request({
//            url: 'http://118.31.34.7:9092/QN_war/wap/myhome/user-index.html',
//            method: 'post',
//            header: header,//传在请求的header里
//            data: {},
//            success(res) {
//              console.log(res.data)
//              let response = res.data
//              if (response.code == 0) {
//                // 每日预期收益
//                $this.sumDailyInterest = response.data.sum_daily_interest
//                if ($this.sumDailyInterest.toString().indexOf('.') > -1) {
//                  if ($this.sumDailyInterest.toString().split('.')[1].length == 1) {
//                    $this.sumDailyInterest = $this.sumDailyInterest + '0'
//                  }
//                } else {
//                  $this.sumDailyInterest = $this.sumDailyInterest + '.00'
//                }
//                // 累计收益
//                $this.myinterest = response.data.myinterest
//                if ($this.myinterest.toString().indexOf('.') > -1) {
//                  if ($this.myinterest.toString().split('.')[1].length == 1) {
//                    $this.myinterest = $this.myinterest + '0'
//                  }
//                } else {
//                  $this.myinterest = $this.myinterest + '.00'
//                }
//                // 可用余额
//                $this.useableMoney = response.data.usable_money
//                if ($this.useableMoney.toString().indexOf('.') > -1) {
//                  if ($this.useableMoney.toString().split('.')[1].length == 1) {
//                    $this.useableMoney = $this.useableMoney + '0'
//                  }
//                } else {
//                  $this.useableMoney = $this.useableMoney + '.00'
//                }
//                // 全部资产
//                $this.totalMoney = response.data.total_money
//                if ($this.totalMoney.toString().indexOf('.') > -1) {
//                  if ($this.totalMoney.toString().split('.')[1].length == 1) {
//                    $this.totalMoney = $this.totalMoney + '0'
//                  }
//                } else {
//                  $this.totalMoney = $this.totalMoney + '.00'
//                }
//                // 头像
//                if (response.data.headImg != null) {
//                  $this.touxiangsrcflag = true
//                  $this.touxiangsrc = response.data.headImg
//                }
//                wx.setStorage({key:"paypassword", data:response.data.pay_password_status})
//                wx.setStorage({key:"bankbind", data:response.data.card_binding_status})
//                wx.setStorage({key:"realname", data:response.data.real_verify_status})
//                //弹窗
//                $this.popupFlag = response.data.real_verify_status == 1 ? false : true
//              }else{
//                $this.popupFlag = true
//              }
//            }
//        })
        ajax.request('/wap/myhome/user-index.html',{}, function(response) {
          console.log(response)
          if (response.code == 0) {
            // 每日预期收益
            $this.sumDailyInterest = response.data.sum_daily_interest
            if ($this.sumDailyInterest.toString().indexOf('.') > -1) {
              if ($this.sumDailyInterest.toString().split('.')[1].length == 1) {
                $this.sumDailyInterest = $this.sumDailyInterest + '0'
              }
            } else {
              $this.sumDailyInterest = $this.sumDailyInterest + '.00'
            }
            // 累计收益
            $this.myinterest = response.data.myinterest
            if ($this.myinterest.toString().indexOf('.') > -1) {
              if ($this.myinterest.toString().split('.')[1].length == 1) {
                $this.myinterest = $this.myinterest + '0'
              }
            } else {
              $this.myinterest = $this.myinterest + '.00'
            }
            // 可用余额
            $this.useableMoney = response.data.usable_money
            if ($this.useableMoney.toString().indexOf('.') > -1) {
              if ($this.useableMoney.toString().split('.')[1].length == 1) {
                $this.useableMoney = $this.useableMoney + '0'
              }
            } else {
              $this.useableMoney = $this.useableMoney + '.00'
            }
            // 全部资产
            $this.totalMoney = response.data.total_money
            if ($this.totalMoney.toString().indexOf('.') > -1) {
              if ($this.totalMoney.toString().split('.')[1].length == 1) {
                $this.totalMoney = $this.totalMoney + '0'
              }
            } else {
              $this.totalMoney = $this.totalMoney + '.00'
            }
            // 头像
            if (response.data.headImg != null) {
              $this.touxiangsrcflag = true
              $this.touxiangsrc = response.data.headImg
            }
            wx.setStorage({key:"paypassword", data:response.data.pay_password_status})
            wx.setStorage({key:"bankbind", data:response.data.card_binding_status})
            wx.setStorage({key:"realname", data:response.data.real_verify_status})
            //弹窗
            $this.popupFlag = response.data.real_verify_status == 1 ? false : true
          }else{
            $this.popupFlag = true
          }
        })
      }
    },
    mounted: function() {
//      wx.removeStorageSync('borrowIndex')
//      let $this = this
//      let isLogin = wx.getStorageSync('isLogin')
//      if ( isLogin || this.$route.query.login == 1) {
//        this.loginflag = false
//        this.accountStar = wx.getStorageSync('accountStar')
//        this.account = wx.getStorageSync('account').substring(0,1)+"**"
//        ajax.request('/wap/myhome/user-index.html',{}, function(response) {
//          console.log(response)
//          if (response.code == 0) {
//            // 每日预期收益
//            $this.sumDailyInterest = response.data.sum_daily_interest
//            if ($this.sumDailyInterest.toString().indexOf('.') > -1) {
//              if ($this.sumDailyInterest.toString().split('.')[1].length == 1) {
//                $this.sumDailyInterest = $this.sumDailyInterest + '0'
//              }
//            } else {
//              $this.sumDailyInterest = $this.sumDailyInterest + '.00'
//            }
//            // 累计收益
//            $this.myinterest = response.data.myinterest
//            if ($this.myinterest.toString().indexOf('.') > -1) {
//              if ($this.myinterest.toString().split('.')[1].length == 1) {
//                $this.myinterest = $this.myinterest + '0'
//              }
//            } else {
//              $this.myinterest = $this.myinterest + '.00'
//            }
//            // 可用余额
//            $this.useableMoney = response.data.usable_money
//            if ($this.useableMoney.toString().indexOf('.') > -1) {
//              if ($this.useableMoney.toString().split('.')[1].length == 1) {
//                $this.useableMoney = $this.useableMoney + '0'
//              }
//            } else {
//              $this.useableMoney = $this.useableMoney + '.00'
//            }
//            // 全部资产
//            $this.totalMoney = response.data.total_money
//            if ($this.totalMoney.toString().indexOf('.') > -1) {
//              if ($this.totalMoney.toString().split('.')[1].length == 1) {
//                $this.totalMoney = $this.totalMoney + '0'
//              }
//            } else {
//              $this.totalMoney = $this.totalMoney + '.00'
//            }
//            // 头像
//            if (response.data.headImg != null) {
//              $this.touxiangsrcflag = true
//              $this.touxiangsrc = response.data.headImg
//            }
//            wx.setStorage({key:"paypassword", data:response.data.pay_password_status})
//            wx.setStorage({key:"bankbind", data:response.data.card_binding_status})
//            wx.setStorage({key:"realname", data:response.data.real_verify_status})
//            //弹窗
//            $this.popupFlag = response.data.real_verify_status == 1 ? false : true
//          }else{
//            $this.popupFlag = true
//          }
//        })
//      }
    }
  }
</script>
<style lang='less' scoped>
  //存管弹窗
  .bankManagementPopUp {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -2.8rem;
    margin-top: -3.73rem;
    width: 5.83rem;
    height: 7.46rem;
    text-align: center;
    z-index: 6;
    background: url("../../../static/assets/bankManagement.png") no-repeat;
    background-size: cover;
    .popUpLayer {
      position: absolute;
      top: 4.75rem;
      left: 1.3rem;
      width: 3.1rem;
      height: .5rem;
      z-index: 7;
      /*border: 1px solid #000;*/
    }
    .close{
      position: absolute;
      bottom: 0;
      left: 2.4rem;
      width: .75rem;
      height: .75rem;
      z-index: 7;
      /*border:1px solid #000;*/
    }
  }
  //
  .typeTips {
    background: #fff;
    font-size: 0;
    padding: .27rem 0 .3rem 0;
    height: 1.18rem;
    box-sizing: border-box;
    .cash{
      background: #fff;
      .capital {
        display: inline-block;
        width: 33.3%;
        border-right:1px solid #ddd;
        box-sizing: border-box;
        div {
          text-align: center;
        }
        div:nth-of-type(1) {
          padding-bottom: .2rem;
          font-size: .24rem;
          color:#636363;
        }
        div:nth-of-type(2) {
          font-size: .28rem;
          color: #4b4b4b;
        }
      }
    }
  }

  .mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: .6;
    z-index: 5;
  }

  .validataPop {
    width: 5.4rem;
    height: 2.5rem;
    background: #f8f8f9;
    border-radius: 40px;
    position: absolute;
    z-index: 11;
    top: 50%;
    left: 50%;
    margin-top: -1.25rem;
    margin-left: -2.7rem;
    overflow: hidden;
    font-size: 0;
    .poptitle {
      margin-top: .45rem;
      font-size: .32rem;
      font-weight: bold;
      color: #000;
      text-align: center;
    }
    .popcontent {
      margin-top: .1rem;
      font-size: .24rem;
      color: #000;
      text-align: center;
    }
    .popBTN {
      height: .88rem;
      border-top: 1px solid #d6d6de;
      position: absolute;
      width: 100%;
      bottom: 0;
      span {
        display: inline-block;
        width: 50%;
        height: 100%;
        line-height: .88rem;
        font-size: .32rem;
        text-align: center;
        color: #007aff;
      }
      span:first-child {
        border-right: 1px solid #d6d6de;
      }
    }
  }

  .loginmask {
    width: 100%;
    position: fixed;
    bottom: 0;
    background: #fff;
    z-index: 5;
    font-size: 0;
    max-width: 980px;
    margin: 0 auto;
    div {
      width: 50%;
      display: inline-block;
      text-align: center;
      padding: .26rem 0;
      span {
        display: inline-block;
        width: 3rem;
        height: .8rem;
        line-height: .8rem;
        text-align: center;
        border-radius: 40px;
        font-size: .28rem;
      }
      .registry {
        border: 2px solid #44b2f7;
        color: #44b2f7;
      }
      .login {
        border: 2px solid #fff;
        background: #44b2f7;
        color: #fff;
      }
    }
  }

  .glass {
    height: 100%;
    position: relative;
  }

  .title {
    background: #284a65;
    padding: .78rem 0;
    height:.5rem;
    line-height: .86rem;
    font-size: .32rem;
    color: #fff;
    .span{
      display: inline-block;
      line-height: .86rem;
      height: .86rem;
      font-size: .32rem;
      color: #fff;
    }
    .touxiang {
      display: inline-block;
      width: .86rem;
      height: .86rem;
      border-radius: 50%;
      float: left;
      margin: 0 .24rem 0 .38rem;
      img {
        width: 100%;
        height: 100%;
        display: block;
      }
    }
    .setting{
      display: inline-block;
      width: .45rem;
      height: .86rem;
      float:right;
      background: url("../../../static/assets/setting.png") no-repeat center;
      background-size: contain;
    }
    .info{
      display: inline-block;
      width: .47rem;
      height: .86rem;
      float:right;
      margin: 0 .46rem 0 .53rem;
      background: url("../../../static/assets/info.png") no-repeat center;
      background-size: contain;
    }
  }
  .count{
    height:2.02rem;
    background:#284a65;
    padding-left: .4rem;
    margin-top: -2px;
    .moneyContent{
      height:.58rem;
      line-height: .58rem;
      font-size: .24rem;
      color: #fff;
      position: relative;
      .sun{
        position: absolute;
        top:.12rem;
        left:2.12rem;
        width:.5rem;
        height: .34rem;
        background: url("../../../static/assets/sun.png") no-repeat center;
        background-size: contain;
      }
      .unsun{
        position: absolute;
        top:.12rem;
        left:2.12rem;
        width:.5rem;
        height: .34rem;
        background: url("../../../static/assets/unsun.png") no-repeat center;
        background-size: contain;
      }
    }
    .moneyContent2{
      height:.77rem;
      line-height: .77rem;
      font-size: .6rem;
      color: #fff;
      position: relative;
      span{
        width:1.12rem;
        height:.48rem;
        border: 1px solid #fff;
        border-radius: .2rem;
        position: absolute;
        right:1.8rem;
        top:0.16rem;
        font-size: .24rem;
        color: #fff;
        text-align: center;
        line-height: .48rem;
        &.tixian{
          right:.39rem;
        }
      }
    }
  }
  .divwapper {
    font-size: 0;
    background: #fff;
    padding: .3rem 0;
    margin-top: .27rem;
    ul{
      height:4.05rem;
      background: #fff;
      li{
        position: relative;
        width:50%;
        float: left;
        box-sizing: border-box;
        height:1.34rem;
        border-right: 1px solid #dddddd;
        border-bottom: 1px solid #dddddd;
        background:#fff url("../../../static/assets/divwapper-1.png") no-repeat .62rem .25rem;
        background-size: .37rem .59rem;
        h3{
          font-size: .3rem;
          color: #4b4b4b;
          text-indent: 1.34rem;
          padding: .24rem 0 .2rem 0;
        }
        p{
          font-size: .22rem;
          color: #a3a3a3;
          text-indent: 1.34rem;
        }
        &.border-right{
          border-right: none;
        }
        &.border-bottom{
          border-bottom:none;
        }
        &.hongbao{
          i{
            width:.86rem;
            height: .86rem;
            background: url("../../../static/assets/jingxi.png") no-repeat left top;
            background-size: contain;
            position: absolute;
            top:0;
            right:-.29rem;
          }
        }
      }

      li:nth-of-type(2){
        background:#fff url("../../../static/assets/divwapper-2.png") no-repeat .51rem .21rem;
        background-size: .63rem .58rem;
      }
      li:nth-of-type(3){
        background:#fff url("../../../static/assets/userInfo.png") no-repeat .59rem .29rem;
        background-size: .44rem .47rem;
      }
      li:nth-of-type(4){
        background:#fff url("../../../static/assets/divwapper-4.png") no-repeat .52rem .29rem;
        background-size: .56rem .49rem;
      }
      li:nth-of-type(5){
        background:#fff url("../../../static/assets/divwapper-5.png") no-repeat .59rem .25rem;
        background-size: .45rem .48rem;
      }
      li:nth-of-type(6){
        background:#fff url("../../../static/assets/divwapper-6.png") no-repeat .55rem .27rem;
        background-size: .42rem .52rem;
      }
    }
  }
</style>
